<template>
  <el-button @click="dialogFormVisible=true">点我</el-button>
  <el-dialog 
    v-model="dialogFormVisible"
    :before-close="beforeClose"
    title="添加权限"
    width="500"
  >
    <el-form :model="form" ref="formRef" label-position="left">
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="请填写权限名称"></el-input>
      </el-form-item>
      <el-form-item label="权限" prop="permission">
        <el-tree
          :data="permissionData"
          style="max-width: 600px;"
          node-key="id"
          show-checkbox
          :default-checked-keys="defaultKeys"
        /> 
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import { userGetMenu } from '../../../api';
// 控制弹窗的显示与隐藏
let dialogFormVisible = ref(false)
// form数据
let form = ref({
  name: '',
  permission: ''
})
// 树形结构菜单权限数据
const permissionData = ref([])
// 关闭弹窗前的回调
const beforeClose = ()=>{
  dialogFormVisible.value = false
}
// 选中权限
const defaultKeys = [4,5]
onMounted(()=>{
  // 获取菜单数据
  userGetMenu().then(({data})=>{
    permissionData.value = data.data
  })
})
</script>